<template>
  <div class="register-container">
    <div class="register-form">
      <h2>创建账号</h2>
      <p class="form-description">加入乐谱智识，探索音乐的无限可能</p>
      
      <div class="register-progress">
        <div class="progress-step" :class="{ active: step >= 1, completed: step > 1 }">
          <span class="step-number">1</span>
          <span class="step-text">基本信息</span>
        </div>
        <div class="progress-line" :class="{ active: step > 1 }"></div>
        <div class="progress-step" :class="{ active: step >= 2, completed: step > 2 }">
          <span class="step-number">2</span>
          <span class="step-text">音乐兴趣</span>
        </div>
        <div class="progress-line" :class="{ active: step > 2 }"></div>
        <div class="progress-step" :class="{ active: step >= 3 }">
          <span class="step-number">3</span>
          <span class="step-text">完成</span>
        </div>
      </div>
      
      <!-- 步骤1：基本信息 -->
      <div v-if="step === 1" class="form-step">
        <div class="form-group">
          <label class="form-label">用户名</label>
          <input type="text" v-model="user.username" class="form-input" 
            placeholder="请输入您的用户名（4-20个字符）" 
            @blur="validateUsername">
          <span v-if="errors.username" class="error-message">{{ errors.username }}</span>
        </div>
        
        <div class="form-group">
          <label class="form-label">邮箱</label>
          <input type="email" v-model="user.email" class="form-input" 
            placeholder="请输入您的邮箱地址" 
            @blur="validateEmail">
          <span v-if="errors.email" class="error-message">{{ errors.email }}</span>
        </div>
        
        <div class="form-group">
          <label class="form-label">密码</label>
          <input type="password" v-model="user.password" class="form-input" 
            placeholder="请设置您的密码（至少8位，包含字母和数字）" 
            @blur="validatePassword">
          <span v-if="errors.password" class="error-message">{{ errors.password }}</span>
        </div>
        
        <div class="form-group">
          <label class="form-label">确认密码</label>
          <input type="password" v-model="user.confirmPassword" class="form-input" 
            placeholder="请再次输入您的密码" 
            @blur="validateConfirmPassword">
          <span v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</span>
        </div>
        
        <div class="form-actions">
          <button @click="validateStep1AndProceed" class="btn btn-primary">下一步</button>
          <div class="form-footer">
            已有账号？ <router-link to="/login" class="link">立即登录</router-link>
          </div>
        </div>
      </div>
      
      <!-- 步骤2：音乐兴趣 -->
      <div v-if="step === 2" class="form-step">
        <div class="form-group">
          <label class="form-label">您的音乐身份是？</label>
          <div class="radio-group">
            <label class="radio-label" v-for="option in identityOptions" :key="option.value">
              <input type="radio" v-model="user.musicIdentity" :value="option.value">
              <span>{{ option.label }}</span>
            </label>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">您会演奏乐器吗？</label>
          <div class="radio-group">
            <label class="radio-label">
              <input type="radio" v-model="user.playsInstrument" value="yes">
              <span>是</span>
            </label>
            <label class="radio-label">
              <input type="radio" v-model="user.playsInstrument" value="no">
              <span>否</span>
            </label>
          </div>
        </div>
        
        <div class="form-group" v-if="user.playsInstrument === 'yes'">
          <label class="form-label">您擅长的乐器是？</label>
          <div class="checkbox-group">
            <label class="checkbox-label" v-for="instrument in instrumentOptions" :key="instrument.value">
              <input type="checkbox" v-model="user.instruments" :value="instrument.value">
              <span>{{ instrument.label }}</span>
            </label>
          </div>
          <div class="other-instrument" v-if="user.instruments.includes('other')">
            <input type="text" v-model="user.otherInstrument" class="form-input" 
              placeholder="请输入您擅长的乐器">
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">您喜欢的音乐风格是？</label>
          <div class="checkbox-group">
            <label class="checkbox-label" v-for="genre in genreOptions" :key="genre.value">
              <input type="checkbox" v-model="user.genres" :value="genre.value">
              <span>{{ genre.label }}</span>
            </label>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">您为什么对乐谱识别感兴趣？</label>
          <div class="checkbox-group">
            <label class="checkbox-label" v-for="reason in reasonOptions" :key="reason.value">
              <input type="checkbox" v-model="user.reasons" :value="reason.value">
              <span>{{ reason.label }}</span>
            </label>
          </div>
          <div class="other-reason" v-if="user.reasons.includes('other')">
            <input type="text" v-model="user.otherReason" class="form-input" 
              placeholder="请输入您的原因">
          </div>
        </div>
        
        <div class="form-actions">
          <button @click="step = 1" class="btn btn-secondary">上一步</button>
          <button @click="validateStep2AndProceed" class="btn btn-primary">下一步</button>
        </div>
      </div>
      
      <!-- 步骤3：完成 -->
      <div v-if="step === 3" class="form-step">
        <div class="completion-box">
          <div class="completion-icon">✓</div>
          <h3>注册成功！</h3>
          <p>您的账号已创建成功，欢迎加入乐谱智识！</p>
          <p>现在您可以享受我们的乐谱识别、音乐助手和社区功能。</p>
          
          <div class="completion-actions">
            <button @click="goToLogin" class="btn btn-primary">立即登录</button>
            <button @click="goToHome" class="btn btn-secondary">返回首页</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { API_ENDPOINTS } from '../config';

export default {
  name: 'RegisterView',
  data() {
    return {
      step: 1,
      user: {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        musicIdentity: 'hobbyist',
        playsInstrument: 'no',
        instruments: [],
        otherInstrument: '',
        genres: [],
        reasons: [],
        otherReason: ''
      },
      errors: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      isSubmitting: false,
      errorMessage: '',
      identityOptions: [
        { value: 'hobbyist', label: '音乐爱好者' },
        { value: 'student', label: '音乐学生' },
        { value: 'teacher', label: '音乐教师' },
        { value: 'professional', label: '专业音乐人' },
        { value: 'other', label: '其他' }
      ],
      instrumentOptions: [
        { value: 'piano', label: '钢琴' },
        { value: 'guitar', label: '吉他' },
        { value: 'violin', label: '小提琴' },
        { value: 'flute', label: '长笛' },
        { value: 'drums', label: '鼓' },
        { value: 'vocal', label: '声乐' },
        { value: 'other', label: '其他' }
      ],
      genreOptions: [
        { value: 'classical', label: '古典音乐' },
        { value: 'jazz', label: '爵士乐' },
        { value: 'pop', label: '流行音乐' },
        { value: 'rock', label: '摇滚乐' },
        { value: 'folk', label: '民谣' },
        { value: 'electronic', label: '电子音乐' },
        { value: 'rap', label: '说唱' },
        { value: 'blues', label: '蓝调' }
      ],
      reasonOptions: [
        { value: 'learning', label: '学习新曲目' },
        { value: 'teaching', label: '教学目的' },
        { value: 'composition', label: '音乐创作' },
        { value: 'archive', label: '数字化收藏' },
        { value: 'curiosity', label: '对技术好奇' },
        { value: 'other', label: '其他' }
      ]
    }
  },
  methods: {
    validateUsername() {
      if (!this.user.username) {
        this.errors.username = '请输入用户名';
        return false;
      }
      if (this.user.username.length < 4 || this.user.username.length > 20) {
        this.errors.username = '用户名必须在4-20个字符之间';
        return false;
      }
      if (!/^[a-zA-Z0-9_]+$/.test(this.user.username)) {
        this.errors.username = '用户名只能包含字母、数字和下划线';
        return false;
      }
      this.errors.username = '';
      return true;
    },
    
    validateEmail() {
      if (!this.user.email) {
        this.errors.email = '请输入邮箱';
        return false;
      }
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.user.email)) {
        this.errors.email = '请输入有效的邮箱地址';
        return false;
      }
      this.errors.email = '';
      return true;
    },
    
    validatePassword() {
      if (!this.user.password) {
        this.errors.password = '请输入密码';
        return false;
      }
      if (this.user.password.length < 8) {
        this.errors.password = '密码至少需要8个字符';
        return false;
      }
      this.errors.password = '';
      return true;
    },
    
    validateConfirmPassword() {
      if (!this.user.confirmPassword) {
        this.errors.confirmPassword = '请确认密码';
        return false;
      }
      if (this.user.password !== this.user.confirmPassword) {
        this.errors.confirmPassword = '两次输入的密码不匹配';
        return false;
      }
      this.errors.confirmPassword = '';
      return true;
    },
    
    async validateStep1AndProceed() {
      // 验证所有字段
      const isUsernameValid = this.validateUsername();
      const isEmailValid = this.validateEmail();
      const isPasswordValid = this.validatePassword();
      const isConfirmPasswordValid = this.validateConfirmPassword();
      
      if (!isUsernameValid || !isEmailValid || !isPasswordValid || !isConfirmPasswordValid) {
        return;
      }
      
      try {
        this.isSubmitting = true;
        
        // 调用后端API验证用户名和邮箱是否可用
        const response = await axios.post(API_ENDPOINTS.REGISTER_BASIC, {
          username: this.user.username,
          email: this.user.email,
          password: this.user.password,
          confirm_password: this.user.confirmPassword
        });
        
        // 如果验证通过，进入下一步
        if (response.data.status === 'success') {
          this.step = 2;
          this.errorMessage = '';
        }
      } catch (error) {
        console.error("验证失败:", error);
        
        if (error.response && error.response.data) {
          if (error.response.data.detail === '用户名已存在') {
            this.errors.username = '用户名已被注册';
          } else if (error.response.data.detail === '邮箱已被注册') {
            this.errors.email = '邮箱已被注册';
          } else {
            this.errorMessage = error.response.data.detail || '验证失败，请检查输入';
          }
        } else {
          this.errorMessage = '服务器连接失败，请稍后再试';
        }
      } finally {
        this.isSubmitting = false;
      }
    },
    
    validateStep2() {
      // 第二步验证：至少选择一个音乐风格
      if (this.user.genres.length === 0) {
        this.errorMessage = '请至少选择一种音乐风格';
        return false;
      }
      
      // 如果选择了演奏乐器，至少选择一个
      if (this.user.playsInstrument === 'yes' && this.user.instruments.length === 0) {
        this.errorMessage = '请至少选择一种乐器';
        return false;
      }
      
      this.errorMessage = '';
      return true;
    },
    
    async validateStep2AndProceed() {
      if (!this.validateStep2()) {
        return;
      }
      
      try {
        this.isSubmitting = true;
        
        // 准备数据
        const basicInfo = {
          username: this.user.username,
          email: this.user.email,
          password: this.user.password,
          confirm_password: this.user.confirmPassword
        };
        
        const preferences = {
          music_identity: this.user.musicIdentity,
          instruments: this.user.instruments,
          genres: this.user.genres,
          reasons: this.user.reasons,
          playsInstrument: this.user.playsInstrument,
          otherInstrument: this.user.otherInstrument,
          otherReason: this.user.otherReason
        };
        
        // 调用完成注册API
        const response = await axios.post(API_ENDPOINTS.REGISTER_COMPLETE, {
          basic_info: basicInfo,
          preferences: preferences
        });
        
        // 存储令牌和用户信息
        localStorage.setItem('access_token', response.data.access_token);
        localStorage.setItem('user', JSON.stringify(response.data.user));
        
        // 进入完成步骤
        this.step = 3;
        
        // 触发登录成功事件
        const event = new CustomEvent('user-register-success');
        window.dispatchEvent(event);
        
      } catch (error) {
        console.error("注册失败:", error);
        
        if (error.response && error.response.data) {
          this.errorMessage = error.response.data.detail || '注册失败，请稍后再试';
        } else {
          this.errorMessage = '服务器连接失败，请稍后再试';
        }
      } finally {
        this.isSubmitting = false;
      }
    },
    
    goToLogin() {
      this.$router.push('/login');
    },
    
    goToHome() {
      this.$router.push('/');
    }
  }
}
</script>

<style scoped>
.register-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  min-height: calc(100vh - 200px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-theme .register-container {
  background-color: #121212;
}

.register-form {
  width: 100%;
  max-width: 600px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

.dark-theme .register-form {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

h2 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 10px;
  color: #333;
}

.dark-theme h2 {
  color: #ffffff;
}

.form-description {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
  font-size: 16px;
}

.dark-theme .form-description {
  color: #ffffff;
}

.register-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #888;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.dark-theme .step-number {
  background: #2a2a35;
  color: #aaa;
}

.progress-step.active .step-number {
  background: #4f46e5;
  color: white;
}

.dark-theme .progress-step.active .step-number {
  background: var(--primary-color);
}

.progress-step.completed .step-number {
  background: #10b981;
  color: white;
}

.dark-theme .progress-step.completed .step-number {
  background: #059669;
}

.step-text {
  font-size: 14px;
  color: #888;
  font-weight: 500;
}

.dark-theme .step-text {
  color: #ffffff;
}

.progress-step.active .step-text {
  color: #4f46e5;
}

.dark-theme .progress-step.active .step-text {
  color: var(--primary-color);
}

.progress-line {
  flex: 1;
  height: 3px;
  background: #f0f0f0;
  position: relative;
  z-index: 0;
}

.dark-theme .progress-line {
  background: #2a2a35;
}

.progress-line.active {
  background: #10b981;
}

.dark-theme .progress-line.active {
  background: #059669;
}

.form-step {
  animation: fadeIn 0.5s ease-out;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #444;
}

.dark-theme .form-label {
  color: #ffffff;
}

.form-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.3s;
}

.dark-theme .form-input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.dark-theme .form-input:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 2px var(--input-focus-shadow);
}

.error-message {
  color: #e53e3e;
  font-size: 14px;
  margin-top: 6px;
}

.form-options {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}

.form-option {
  flex: 1 0 calc(50% - 15px);
  min-width: calc(50% - 15px);
}

.option-card {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

.dark-theme .option-card {
  border-color: var(--input-border);
}

.option-card:hover {
  border-color: #4f46e5;
  background: #f9f9ff;
}

.dark-theme .option-card:hover {
  border-color: var(--primary-color);
  background: var(--hover-bg);
}

.option-card.selected {
  border-color: #4f46e5;
  background: #f5f7ff;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.1);
}

.dark-theme .option-card.selected {
  border-color: var(--primary-color);
  background: var(--hover-bg);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.1);
}

.option-input {
  margin-right: 10px;
}

.option-label {
  font-weight: 500;
  color: #444;
}

.dark-theme .option-label {
  color: #ffffff;
}

.form-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn {
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  min-width: 200px;
}

.dark-theme .btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-secondary {
  background: #f5f5f5;
  color: #555;
  margin-top: 10px;
}

.dark-theme .btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.btn-secondary:hover {
  background: #ebebeb;
}

.dark-theme .btn-secondary:hover {
  background: #333340;
}

.form-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.dark-theme .form-footer {
  color: #ffffff;
}

.link {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 500;
}

.dark-theme .link {
  color: var(--primary-color);
}

.link:hover {
  text-decoration: underline;
}

.completion-box {
  text-align: center;
  padding: 30px 20px;
}

.completion-icon {
  width: 80px;
  height: 80px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 20px;
}

.dark-theme .completion-icon {
  background: #059669;
}

.completion-box h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333;
}

.dark-theme .completion-box h3 {
  color: #ffffff;
}

.completion-box p {
  color: #666;
  margin-bottom: 10px;
  font-size: 16px;
}

.dark-theme .completion-box p {
  color: #ffffff;
}

.completion-actions {
  margin-top: 30px;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

.completion-actions .btn {
  min-width: 150px;
  height: 48px;
  line-height: 48px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.completion-actions .btn-primary {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
}

.dark-theme .completion-actions .btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.completion-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.completion-actions .btn-secondary {
  background: #f5f5f5;
  color: #555;
}

.dark-theme .completion-actions .btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.completion-actions .btn-secondary:hover {
  background: #ebebeb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-theme .completion-actions .btn-secondary:hover {
  background: #333340;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .register-form {
    padding: 30px 20px;
  }
  
  .progress-step .step-text {
    font-size: 12px;
  }
  
  .form-option {
    flex: 1 0 100%;
    min-width: 100%;
  }
  
  .completion-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn {
    width: 100%;
  }
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.checkbox-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #f3f4f6;
  border: 1px solid #e0e7ff;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-label span {
  font-size: 14px;
  color: #4b5563;
  transition: all 0.3s ease;
}

.checkbox-label:hover {
  background-color: #e0e7ff;
  border-color: #818cf8;
}

.checkbox-label input:checked + span {
  color: #818cf8;
  font-weight: 500;
}

.checkbox-label input:checked ~ .checkbox-label {
  background-color: #e0e7ff;
  border-color: #818cf8;
}

.dark-theme .checkbox-label {
  background-color: #252530;
  border-color: #3a3a45;
}

.dark-theme .checkbox-label span {
  color: #e0e0e0;
}

.dark-theme .checkbox-label:hover {
  background-color: #333340;
  border-color: #818cf8;
}

.dark-theme .checkbox-label input:checked + span {
  color: #818cf8;
}

.dark-theme .checkbox-label input:checked ~ .checkbox-label {
  background-color: #333340;
  border-color: #818cf8;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.radio-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #f3f4f6;
  border: 1px solid #e0e7ff;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.radio-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radio-label span {
  font-size: 14px;
  color: #4b5563;
  transition: all 0.3s ease;
}

.radio-label:hover {
  background-color: #e0e7ff;
  border-color: #818cf8;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.2);
}

.radio-label input:checked + span {
  color: #818cf8;
  font-weight: 500;
}

.radio-label input:checked ~ .radio-label {
  background-color: #e0e7ff;
  border-color: #818cf8;
}

.dark-theme .radio-label {
  background-color: #252530;
  border-color: #3a3a45;
}

.dark-theme .radio-label span {
  color: #e0e0e0;
}

.dark-theme .radio-label:hover {
  background-color: #333340;
  border-color: #818cf8;
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
}

.dark-theme .radio-label input:checked + span {
  color: #818cf8;
}

.dark-theme .radio-label input:checked ~ .radio-label {
  background-color: #333340;
  border-color: #818cf8;
}

.form-actions {
  margin-top: 30px;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.btn {
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  min-width: 120px;
}

.btn-primary {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
}

.dark-theme .btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-secondary {
  background: #f5f5f5;
  color: #555;
}

.dark-theme .btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.btn-secondary:hover {
  background: #ebebeb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-theme .btn-secondary:hover {
  background: #333340;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
</style> 